<template>
    <div class="content">
        <a-card class="card">
            <div class="button">
                <a-space>
                    <a-button type="primary" @click="showAddModal">新增</a-button>
                    <a-popconfirm title="确定要删除菜单吗?"
                                  ok-text="Yes"
                                  cancel-text="No"
                                  @confirm="confirm"
                                  @cancel="cancel">
                        <a-button type="primary" danger>删除</a-button>
                    </a-popconfirm>

<!--                    <a-button type="dashed">删除</a-button>-->
                </a-space>
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #button="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #show="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #action="{record}">
                        <a-button type="link" @click="editHandle(record)">编辑</a-button>

                    </template>
                </a-table>
            </div>
        </a-card>
<!--  新增弹框      -->
        <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
    </div>
</template>

<script lang="ts">
import myTable from "@/components/CommonTable.vue";
import {defineComponent, ref, reactive, toRefs, onMounted} from "vue";
import { getAllMenu, deleteMenus, addMenus,updateMenusInfo } from "@/api";
import commonModal from './components/commonModal.vue'
import {message} from "ant-design-vue";

export default defineComponent({
    name: "index",
    components: { myTable, commonModal},
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total: number) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 150,
                    align: 'center',
                    customRender: (text: any) => `${text.index + 1}`
                },
                {
                    title: "菜单名称",
                    dataIndex: "name",
                    key: "name",
                    align: 'center',
                    width: 120,
                    ellipsis: true
                },
                {
                    title: "菜单URL",
                    dataIndex: "url",
                    align: 'center',
                    width: 200,
                    key: "url",
                    ellipsis: true
                },
                {
                    title: "菜单访问权限",
                    dataIndex: "menuPermission",
                    key: "menuPermission",
                    align: 'center',
                    width: 150,
                    ellipsis: true
                },
                {
                    title: "菜单排序",
                    dataIndex: "sort",
                    align: 'center',
                    key: "sort",
                    ellipsis: true
                },
                {
                    title: "是否按钮",
                    dataIndex: "isBitton",
                    key: "isBitton",
                    align: 'center',
                    ellipsis: true,
                    slots: { customRender: 'button'}
                },
                {
                    title: "是否显示",
                    dataIndex: "isShow",
                    align: 'center',
                    key: "isShow",
                    ellipsis: true,
                    slots: { customRender: 'show'}
                },
                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })
        const state = reactive({
            data: undefined as any,
            addModalVisible: false, // 新增菜单弹框
        })
        // 新增菜单表单
        const addFormState = reactive({

        })
        // 对话框表单
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })
        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys: any, selectedRows: any) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        //table自适应高度
        const scrollChange = (val: any) => {
            tableDataObj.scroll.y = val
        }

        // 获取菜单列表
        const getMeuns = () => {
            tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)

            // tableDataObj.tableData = state.data.map((item: any) => {
            //     if (item.childrenMenus.length === 0) {
            //         return item
            //     } else {
            //         const temp = {
            //             children: item.childrenMenus
            //         }
            //         delete item.childrenMenus
            //         return {...temp,...item}
            //     }
            // })
            console.log(336,tableDataObj.tableData)
        }

        // 打开新增菜单弹框
        const showAddModal = () => {
            // state.addModalVisible = true
            modalData.showAdd = true
            modalData.title = "新增菜单"
            modalData.formState = {}
            modalData.typeName = "add"
        }

        // 编辑菜单
        const editHandle = (record: any) => {
            modalData.formState = record
            modalData.title = "编辑菜单"
            modalData.showAdd = true
            modalData.typeName = "edit"
        }

        // 删除菜单操作
        const handleDelete = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请选择一条数据')
                return
            }

        }

        // 取消删除
        const cancel = () => {
            message.error('取消删除')
        }
        const confirm = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用删除接口
            deleteMenus(rowSelection.selectedRowKeys).then((res) => {
                if (res.data.code == 200) {
                    message.success('删除成功')
                    // 获取菜单
                    getAllMenu({}).then((res) => {
                        if (res.data.code == 200) {
                            // 将更新后的菜单存
                            let menus = JSON.stringify(res.data.data)
                            window.localStorage.setItem('meuns', menus)
                            tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)
                        }
                    })
                }
            })

        }
        // 控制对话框操作
        const handleClose = (val: any) => {
            if (val == 'add') {
                // 调用接口，新增菜单
                addMenus(modalData.formState).then((res) => {
                    if (res.data.code == 200 ) {
                        message.success('新增菜单成功')
                        getAllMenu({}).then((res) => {
                            if (res.data.code == 200) {
                                // 将更新后的菜单存
                                let menus = JSON.stringify(res.data.data)
                                window.localStorage.setItem('meuns', menus)
                                tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)
                            }
                        })

                    }
                })
                // console.log(3333333, modalData.formState)
                // alert('新增了')
            }
            if (val == 'edit') {
                // 调用接口，编辑菜单
                updateMenusInfo(modalData.formState).then((res) => {
                    if (res.data.code == 200) {
                        message.success('菜单编辑成功')
                        getAllMenu({}).then((res) => {
                            if (res.data.code == 200) {
                                // 将更新后的菜单存
                                let menus = JSON.stringify(res.data.data)
                                window.localStorage.setItem('meuns', menus)
                                tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)
                            }
                        })
                    }
                })
                console.log(222222, modalData.formState)
                // alert('编辑了')
            }
            if (val == 'cancel') {
                // 点击取消按钮，
                tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)
            }
            modalData.showAdd = false
        }


        onMounted(()=> {
            getMeuns()
        })
        return{
            ...toRefs(tableDataObj),
            ...toRefs(state),
            addFormState,
            modalData,
            rowSelection,
            scrollChange,
            showAddModal,
            handleClose,
            editHandle,
            handleDelete,
            confirm,
            cancel
        }
    }
})
</script>

<style lang="less" scoped>
    .content{
        width: 100%;
        height: 100%;

        .card {
            height: 100%;
            //background: #364d79;
            margin: 10px;

            .button {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
            }
        }
    }
</style>